/**
 * desc: 订单信息弹窗页面
 */

import React, { useState, useEffect } from 'react';
import CommonTable from '@/components/CommonTable';
import CommonModal from '@/components/CommonModal';
import CommonPagination from '@/components/CommonPagination';
import CommonLoading from '@/components/CommonLoading';
import { getOperationLogDetail } from '../../service';
import { Button } from 'antd';

const initPagination = {
  current: 1,
  total: 0,
  pageSize: 10,
  showQuickJumper: true,
  pageSizeOptions: [10, 20, 50],
};

export default ({ visible, handleCancel, orderSn }) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]); //操作日志列表
  const [pagination, setPagination] = useState(null); //分页数据

  useEffect(() => {
    if (visible) {
      setPagination({
        ...(pagination || initPagination),
        current: 1,
      });
    }
  }, [visible]);

  useEffect(() => {
    if (pagination) {
      operationLogDetail();
    }
  }, [pagination]);

  const operationLogDetail = async () => {
    setLoading(true);
    setData([]);
    const { data = {}, success } = await getOperationLogDetail({
      orderSn,
      size: pagination.pageSize,
      current: pagination.current,
    });
    const { total = 0, list = [] } = data;
    if (success) {
      list.map((item, index) => {
        item.id = index;
      });
      setData(list);
      pagination.total = total;
    }
    setLoading(false);
  };

  const columns = [
    {
      title: '操作人',
      dataIndex: 'userAccount',
      key: 'userAccount',
      width: 100,
      render: (text) => text || '',
    },
    {
      title: '操作事件',
      dataIndex: 'eventContent',
      key: 'eventContent',
      width: 250,
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 170,
      render: (text) => text || '',
    },
  ];

  const CommomTableProps = {
    data,
    columns,
    // rowKey: 'logId',
    handleRowKey(record, index) {
      return record.id;
    },
    scroll: { y: 200 },
  };

  const onCancel = () => {
    handleCancel();
  };

  const pageProps = {
    pagination,
    handleChange(current, size) {
      setPagination({
        ...pagination,
        current: current == pagination.current ? 1 : current,
        pageSize: size,
      });
    },
  };
  return (
    <CommonModal
      title="日志"
      visible={visible}
      onCancel={onCancel}
      width="832px"
      footer={[
        <Button onClick={onCancel} key="save" type="primary">
          关闭
        </Button>,
      ]}
    >
      <CommonTable {...CommomTableProps} />
      <div
        style={{
          marginTop: '16px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-end',
        }}
      >
        <CommonPagination {...pageProps} />
      </div>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};
